<template>
    <div class="person">
        <h2>需求:当水温达到60℃,或水位达到80英尺时,给服务器发请求</h2>
        <h2>当前水温为:{{ temperature }}℃</h2>
        <h2>当前水位为:{{ height }}英尺</h2>
        <button @click="changeTemperature">水温+10</button>
        <button @click="changeHeight">水温+10</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref, watch, watchEffect } from 'vue'

let temperature = ref(10)
let height = ref(0)

function changeTemperature() {
    temperature.value += 10
}
function changeHeight() {
    height.value += 10
}

// watch([temperature, height], (value) => { // 监视 -- watch 实现
//     // 从 value 中获取最新的水温(newTemp),最新的水位(newHei)
//     let [newTemp, newHei] = value
//     if (newTemp >= 60 || newHei >= 80) { // 逻辑
//         alert('达到要求了')
//     }
// })

watchEffect(() => { // 监视 -- watchEffect 实现
    // console.log("我来啦");
    if (temperature.value >= 60 || height.value >= 80) {
        console.log("给服务器发请求");
    }
})
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>
